<template>
  <div class="right-menu-wrapper" @mousemove="mousemove" @mouseup="mouseup" >
    <div class="right-menu-margin">
      <div class="right-menu-title" @mousedown="mousedown"  >目录</div>
      <div class="right-menu-content">
        <RightMenuItem :list="headers" :hashText="hashText" :minLevel="minLevel"></RightMenuItem>
      </div>
    </div>
  </div>
</template>

<script>
import RightMenuItem from "./RightMenuItem.vue";
export default {
  components: {RightMenuItem},
  data() {
    return {
      headers: [],
      hashText: '',
      minLevel: 0,

      //鼠标相对元素 位置
      mouseElementRelativeX: 0,
      mouseElementRelativeY: 0,
      isMouseMove: false,   //鼠标是否按下
    }
  },
  mounted() {
    this.getHeadersData()
    this.getHashText()
    // console.log(this.headers)
    // console.log(this.hashText)
  },
  watch: {
    $route() {
      this.headers = this.$page.headers
      this.getHashText()
    }
  },
  methods: {
    getHeadersData() {
      this.headers = this.$page.headers
      if (this.headers.length > 0){
        this.minLevel =  this.headers[0].level
      }
    },
    getHashText() {
      this.hashText = decodeURIComponent(window.location.hash.slice(1))
    },


    mousedown(e){
      var element = document.querySelector(".right-menu-wrapper")
      this.mouseElementRelativeX = e.clientX - element.offsetLeft
      this.mouseElementRelativeY = e.clientY - element.offsetTop
      this.isMouseMove = true
    },
    mouseup(){
      this.isMouseMove = false
    },
    mousemove(e){
      if (this.isMouseMove){
        console.log("-------------------")
        // console.log(e.clientX)
        // console.log(this.mouseElementRelativeX)
        // console.log(e.clientY)
        // console.log(this.mouseElementRelativeY)
        var element = document.querySelector(".right-menu-wrapper")
        element.style.left = e.clientX - this.mouseElementRelativeX + "px"
        element.style.top =  e.clientY - this.mouseElementRelativeY + "px"
      }
    }
  }
}
</script>

<style >


.right-menu-wrapper {
  user-select: none;
  width: 250px;
  position: fixed;
  bottom: 110px;
  right: 40px;
  font-size: .8rem;
  z-index: 10;
  box-sizing: border-box;
  height: 50%;
  padding-left: 5px;
}

.right-menu-margin{
  background: white;
  border-radius: 3px;
  padding: 10px 0 10px 0;
}

.right-menu-title {
  cursor: move;

  color: #00323c;
  border-bottom: 1px solid #e0e0e0;
  padding-bottom: 5px;
  margin-bottom: 5px;
  margin-left: 5px;
}

.right-menu-margin{
  height: 100%;
}
.right-menu-content{
  box-sizing: border-box;
  padding-left: 3px;
  padding-bottom: 20px;
  height: 100%;
  overflow-y: scroll;
}



/*滚动条样式*/
.right-menu-content::-webkit-scrollbar {
  width: 0px;
}
.right-menu-content::-webkit-scrollbar-thumb {
  width: 0px;
}
.right-menu-content::-webkit-scrollbar-track {
  width: 0px;
}


</style>
